<template>
	<div style="overflow: auto;height:400px">
		<el-row class="py-2 ml-1 border-bottom" v-for="item in 10" :key="item">
			<el-col :span="8" class="mb-1">
				问题图层：2000现状图
			</el-col>
			<el-col :span="8">
				问题类型：一般错误
			</el-col>
			<el-col :span="5" :offset="3"class="text-center">
				2018/10/03
			</el-col>
			<el-row>
				<el-col :span="18">
					<ul>
						<li class="mb-1">问题位置：坐标X 107.45；坐标Y 302.09</li>
						<li class="mb-1">问题描述：部分内容缺失</li>
						<li>
							修改情况：已修改
						</li>
					</ul>
				</el-col>
				<el-col :span="6" class="text-center py-2">
					<el-button type="primary" size="mini" @click="handleEdite">修改</el-button>
					<el-button type="danger" size="mini">删除</el-button>
				</el-col>
			</el-row>
		</el-row>
		<!-- 修改情况弹框 -->
		<div class='dialog' v-show="isEdite">
			<div class="dialogTitle">
				<span>修改情况</span>
				<i class="el-icon-close" @click="isEdite = false"></i>
			</div>
			<div class="dialogContent">
				<el-radio-group>
					<el-radio :label="3">已修改</el-radio>
					<el-radio :label="6">未修改</el-radio>
				</el-radio-group>
				<div class="text-right">
					<el-button type="primary" size="mini">确定</el-button>
					<el-button size="mini">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				isEdite:true
			}
		},
		methods:{
			//修改情况
			handleEdite:function () {
				this.isEdite = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog{
		width:320px;
		height:190px;
		background:rgba(255,255,255,1);
		box-shadow:0px 3px 6px rgba(0,0,0,0.16);
		position: absolute;
		left:calc(50% - 160px);
		top:100px;
		.dialogTitle{
			width:320px;
			height:40px;
			background:rgba(248,248,248,1);
			padding:10px 20px;
			font-size:14px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(87,89,89,1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			i{
				cursor: pointer;
			};
		};
		.dialogContent{
			height:calc(100% - 40px);
			padding:30px 20px 20px 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>
